<template>
  <div class="login-info">
      <div class="user_info">
          <span class="user-info" v-for="(item,index) in info" :key="index">
            <svg class="icon" aria-hidden="true">
              <use :xlink:href="item.icon"></use>
            </svg>
            {{item.title}}：{{item.value}}
          </span>
      </div>
      <div class="home_exit">
        <a href="/User" class="user-home" target="_blank">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-jinru"></use>
          </svg>
          个人主页
        </a>
        <a href="JavaScript:;" class="exit" @click="exitLogin">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tuichu"></use>
          </svg>  
          退出登录
        </a>
      </div>
    </div>
</template>

<script>
export default {
  name: 'Info',

  data() {
    return {
      // 信息数据集
      info:[
        {title: '用户名', value: '', icon: '#icon-xingming'},
        {title: '年龄', value: '', icon: '#icon-nianling'},
        {title: '性别', value: '', icon: '#icon-xingbie'},
        {title: '星座', value: '', icon: '#icon-xingzuo'},
        {title: '生日', value: '', icon: '#icon-shengri'}
      ],
    };
  },

  props: {
    // 退出登录
    exitLogin: Function
  },

  mounted(){
    this.init()
  },
  methods: {
    // 初始化
    init(){
      let res = this.$store.state.userinfo
      this.info[0].value = res.name
      this.info[1].value = res.age
      this.info[2].value = res.sex
      this.info[3].value = res.constellation
      this.info[4].value = res.birthday
    }
  }
};
</script>

<style scoped>
.login-info{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: absolute;
  width: 280px;
  box-shadow: 0 3px 5px gray;
  top: 75px;
  right: 10px;
  padding: 10px;
  background-image: url(../../assets/image/userBG.jpg);
  z-index: 9999;
  font-size: 0.8rem;
  background-size: cover;
}
.login-info .user-home,.exit{
  color: blue;
  opacity: .6;
}
.home_exit{
  display: flex;
  width: 100%;
  justify-content: space-between;
}
.login-info a:hover{
  opacity: 1;
}
.user_info{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.user_info .user-info{
  display: block;
  padding: 10px;
}
.user_info .user-info:last-child{
  width: 100%;
}
</style>